<template>
  <div class="album">
    <div class="info" v-if="count !== 0">
      <div class="title">收藏的专辑({{ count }})</div>
      <div class="box">
        <songItem
          v-for="item in favoriteAlbumList"
          :key="item.id"
          :itemData="item"
          class="songItem"
          :type="'collect'"
          @handleClick="handleClick"
        ></songItem>
      </div>
    </div>
    <div class="tip" v-else><div>暂无收藏专辑</div></div>
  </div>
</template>
<script>
import songItem from '@/views/Discover/disCoverChildren/components/songItem.vue'
import { getCollectAlbum } from '@/api/collect/collect'
export default {
  data() {
    return {
      favoriteAlbumList: [], // 数据
      count: 0 // 当前收藏数量
    }
  },
  components: {
    songItem
  },
  methods: {
    // 获取收藏歌单
    async getCollectAlbum() {
      const timestamp = Date.parse(new Date())
      const res = await getCollectAlbum({
        limit: 1000,
        timestamp
      })
      // console.log(res)
      this.favoriteAlbumList = res.data.data
      this.count = res.data.count
      this.$store.commit('updateSubAlbumList', res.data.data)
    },
    // 跳转歌单详情
    handleClick(id) {
      this.$router.push({ path: '/index/album', query: { id } })
      // console.log(id)
    }
  },
  mounted() {
    this.getCollectAlbum()
    console.log(this.$store.state.subAlbumList, 123)
    if (this.$store.state.subAlbumList == null) {
      this.getCollectAlbum()
      console.log('发送了请求')
    } else {
      this.favoriteAlbumList = this.$store.state.subAlbumList
      console.log(this.favoriteAlbumList)
      this.count = this.$store.state.subAlbumList.length
    }
  },
  watch: {
    '$store.state.subAlbumList'(current) {
      this.favoriteAlbumList = current
      this.count = current.length
    }
  }
}
</script>
<style lang="scss" scoped>
.album {
  padding: 20px;
  height: 74vh;
  .info {
    .title {
      margin-bottom: 20px;
    }
  }
}
.box {
  display: flex;
  flex-wrap: wrap;
  .songItem {
    margin-right: 10px;
    margin-bottom: 50px;
  }
}
</style>
